Nessa aula, abordamos o processo de Escalar a tipografia em no nosso Design System. Começamos definindo um tamanho base para a tipografia, que normalmente é 16, mas pode variar para 14 em alguns sistemas, como o Base do Uber. Destacamos a importância de analisar cada tipografia individualmente, pois elas podem exigir diferentes espaçamentos entre caracteres e alturas de linha para facilitar a leitura e acessibilidade.
Expliquei que para aprofundar no conhecimento tipográfico, é possível consultar recursos como o Google Fonts e o Material Design, que oferecem artigos e documentação detalhada sobre o assunto. Também mencionei a importância de entender as diferenças entre plataformas, como a web e o iOS, que usam Line-Height ou Bounding Box, e o Android, que considera a Baseline do texto.
Durante a aula, ensinei como escalar a tipografia manualmente, utilizando multiplicadores, e também apresentei plugins do Figma que podem facilitar esse processo, como o Font Scale e o TypeScale. Mostrei como configurar o Small Nugde / Big Nudge no Figma para trabalhar com incrementos de quatro em quatro pixels, o que ajuda a manter a consistência e a acessibilidade.
Discutimos a importância de trabalhar com valores arredondados e múltiplos de quatro para evitar números quebrados e garantir uma boa legibilidade e um grid coerente. Também abordei a necessidade de comunicar-se com os desenvolvedores para entender os valores que eles precisam e considerar as diferenças entre plataformas.
Por fim, enfatizei que, embora tenhamos criado uma escala tipográfica ampla, de 12pt até 92, é essencial testar no design e remover o excesso conforme as necessidades do produto. Na próxima aula, vamos explorar o ritmo vertical e os estilos de tipografia no design, incluindo os pesos da fonte. Destaquei que as práticas ensinadas são "boas práticas", mas não regras fixas, e devem ser adaptadas conforme o contexto do projeto.
Links da Aula: